<template>
  <div class="query-form-container">
    <el-form
      ref="queryForm"
      :model="queryParams"
      inline
    >
      <el-form-item
        size="small"
        prop="productSn"
        :label="$t('product_purchase_cmpts_queryform_151')"
      >
        <el-input v-model="queryParams.productSn" clearable/>
      </el-form-item>
      <el-form-item
        size="small"
        prop="productName"
        :label="$t('product_purchase_cmpts_queryform_152')"
      >
        <el-input v-model="queryParams.productName" clearable/>
      </el-form-item>
      <el-form-item
        :label="$t('product_purchase_cmpts_queryform_153')"
        size="small"
        prop="categories"
      >
        <el-cascader
          v-model="queryParams.categories"
          :options="categoryOptions"
          :props="{ multiple: true, checkStrictly: true, emitPath: false }"
          :collapse-tags="true"
          clearable
        />
      </el-form-item>
      <el-form-item
        :label="$t('product_purchase_cmpts_queryform_154')"
        size="small"
        prop="status"
      >
        <el-select v-model="queryParams.status" :placeholder="$t('product_purchase_cmpts_queryform_155')">
          <el-option
            :key="productStatus.ON"
            :value="productStatus.ON"
            :label="$t('product_purchase_cmpts_queryform_156')"
          />
          <el-option
            :key="productStatus.OFF"
            :value="productStatus.OFF"
            :label="$t('product_purchase_cmpts_queryform_157')"
          />
        </el-select>
      </el-form-item>
      <div>
        <el-button
          type="primary"
          size="small"
          class="btn"
          @click="search"
        >{{$t('product_purchase_cmpts_queryform_158')}}</el-button>
        <el-button
          type="primary"
          size="small"
          class="btn"
          @click="reset"
        >{{$t('product_purchase_cmpts_queryform_159')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import * as productStatus from "@/constants/product"
import { queryCategoryTree } from '@/api/category'
export default {
  name: 'QueryForm',
  data() {
    return {
      queryParams: {},
      categoryOptions: [],
    }
  },
  computed: {
    productStatus() {
      return productStatus;
    }
  },
  methods: {
    search() {
      this.$emit("search", this.queryParams);
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.search();
    },
    async getProductCategories() {
      const res = await queryCategoryTree();
      const {data} = res;
      if (!data) {
        return;
      }
      data.forEach(first => {
        first.value = first.label
        first.children.forEach(second => {
          second.value = second.label
        })
      })
      this.categoryOptions = data;
    }
  },
  created() {
    this.getProductCategories();
  }
}
</script>

<style lang="scss" scoped>

</style>
